<template>
  <view class="viewport">
    <scroll-view
      class="scroll-view"
      :refresher-triggered="refreshing"
      scroll-y="true"
      lower-threshold="20"
      @scrolltolower="onScrollToLower"
      @refresherrefresh="onRefresh"
    >
      <view class="warp">
        <view class="title">
          <fui-section
            title="处理进度"
            fontWeight="500"
            descrSize="25"
            color="#666"
            lineWidth="4px"
            isLine
          ></fui-section>
        </view>

        <view class="port">
          <!-- 报修申请 -->
          <view class="li">
            <view class="top">
              <view class="dian"></view>
              <view class="top_title">报修申请</view>
              <view class="time">2023.01.14 16:34:07</view>
            </view>
            <view class="footer">
              <view class="info">
                <view>报修人：潘悦恺</view>
                <view>所在部门：生产部门</view>
              </view>
            </view>
          </view>

          <!-- 通过审核 -->
          <view class="li">
            <view class="top">
              <view class="dian"></view>
              <view class="top_title">通过审核</view>
              <view class="time">2023.01.14 16:34:07</view>
            </view>
            <view class="footer">
              <view class="info">
                <view>审核人：羽慧晨</view>
                <view>所在部门：管理部</view>
              </view>
            </view>
          </view>

          <!-- 派工 -->
          <view class="li">
            <view class="top">
              <view class="dian"></view>
              <view class="top_title">派工</view>
              <view class="time">2023.01.14 16:34:07</view>
            </view>
            <view class="footer">
              <view class="info">
                <view>派工人：针清怡</view>
                <view>所在部门：维修部</view>
              </view>
            </view>
          </view>

          <!-- 接单 -->
          <view class="li">
            <view class="top">
              <view class="dian"></view>
              <view class="top_title">接单</view>
              <view class="time">2023.01.14 16:34:07</view>
            </view>
            <view class="footer">
              <view class="info">
                <view>接单人：谷心水（负责人）</view>
                <view>维修班组：湊合能用就行维修小队</view>
                <view>关联维修工单：ME1010</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import fuiSection from "@/components/firstui/fui-section/fui-section.vue";
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: skyblue;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
}
.scroll-view {
  height: 100%;
}
.warp {
  background-color: #fff;
  .title {
    display: flex;
    align-items: center;
    height: 80rpx;
    border-bottom: 1px solid #ccc;
  }
  .port {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      left: 41rpx;
      top: 0;
      width: 2px;
      height: 100%;
      background-color: #e5e5e5;
    }
    .li {
      padding: 20rpx 0;
      position: relative;
      .top {
        display: flex;
        align-items: center;
        height: 80rpx;
        .dian {
          width: 25rpx;
          height: 25rpx;
          background-color: #0052d9;
          border-radius: 50%;
          margin: 0 30rpx;
          z-index: 1;
        }
        .top_title {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
        }
        .time {
          margin-left: auto;
          margin-right: 30rpx;
          color: #999;
          font-size: 24rpx;
        }
      }
      .footer {
        padding: 0 85rpx;
        .info {
          view {
            color: #666;
            font-size: 26rpx;
            line-height: 1.8;
          }
        }
      }
    }
  }
}
</style>
